<template>
    <div>
      <el-container style="height: 900px; border: 1px solid #eee">
        <!-- 顶部导航栏 -->
        <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">
          <div class="header-left">
            <span>书缘校园-校园二手书交流系统</span>
          </div>
          <div class="header-right">
            <router-link to="/mySetting">
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            </router-link>
          </div>
        </el-header>
  
        <el-container>
          <!-- 侧边栏 -->
          <aside-layout></aside-layout>
  
          <!-- 主内容区 -->
          <el-main>
            <!-- 仓库信息展示 -->
            <el-card class="warehouse-info-card">
              <div slot="header" class="clearfix">
                <span>仓库信息</span>
              </div>
              <div class="warehouse-info">
                <el-avatar :size="100" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                <div class="warehouse-details">
                  <h3>{{ warehouseInfo.name }}</h3>
                  <p>地址: {{ warehouseInfo.address }}</p>
                  <p>管理员: {{ warehouseInfo.manager }}</p>
                </div>
              </div>
            </el-card>
  
            <!-- 库存管理 -->
            <el-card class="inventory-card" style="margin-top: 20px;">
              <div slot="header" class="clearfix">
                <span>库存管理</span>
              </div>
              <!-- 搜索框和筛选 -->
              <el-row :gutter="20" style="margin-bottom: 20px;">
                <el-col :span="8">
                  <el-input v-model="searchQuery" placeholder="请输入书名或作者" clearable @clear="fetchBooks">
                    <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
                  </el-input>
                </el-col>
                <el-col :span="6">
                  <el-select v-model="selectedCategory" placeholder="选择分类" @change="fetchBooks" style="width: 100%;">
                    <el-option label="所有分类" value=""></el-option>
                    <el-option label="小说" value="小说"></el-option>
                    <el-option label="教材" value="教材"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-select v-model="sortBy" placeholder="排序方式" @change="fetchBooks" style="width: 100%;">
                    <el-option label="默认排序" value=""></el-option>
                    <el-option label="价格升序" value="priceAsc"></el-option>
                    <el-option label="价格降序" value="priceDesc"></el-option>
                  </el-select>
                </el-col>
              </el-row>
  
              <!-- 书籍列表 -->
              <el-table
                :data="filteredBooks"
                style="width: 100%; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);"
                @row-click="handleRowClick"
                :row-style="{ cursor: 'pointer' }"
                :header-cell-style="{ background: '#f5f7fa', color: '#333', fontWeight: 'bold' }"
                :cell-style="{ padding: '12px 8px' }"
              >
                <el-table-column prop="name" label="书名" width="200"></el-table-column>
                <el-table-column prop="author" label="作者" width="150"></el-table-column>
                <el-table-column prop="price" label="价格" width="120"></el-table-column>
                <el-table-column prop="category" label="分类" width="120"></el-table-column>
                <el-table-column prop="stock" label="库存" width="100"></el-table-column>
                <el-table-column label="操作" width="200">
                  <template slot-scope="scope">
                    <el-button type="text" @click="handleStockIn(scope.row)">入库</el-button>
                    <el-button type="text" @click="handleStockOut(scope.row)">出库</el-button>
                    <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
  
              <!-- 分页 -->
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalBooks"
                style="margin-top: 20px;"
              ></el-pagination>
            </el-card>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  
  <script>
  import AsideLayout from '../../layout/AsideLayout.vue';
  
  export default {
    components: { AsideLayout },
    data() {
      return {
        warehouseInfo: {
          name: '书缘仓库',
          address: '校园路123号',
          manager: '张三'
        },
        searchQuery: '', // 搜索框内容
        selectedCategory: '', // 选择的分类
        sortBy: '', // 排序方式
        tableData: [
          { name: 'JavaScript 高级程序设计', author: 'Nicholas C. Zakas', price: 80.00, category: '教材', stock: 10 },
          { name: '算法导论', author: 'Thomas H. Cormen', price: 120.00, category: '教材', stock: 5 },
          { name: 'Python 编程', author: 'Mark Lutz', price: 70.00, category: '教材', stock: 8 },
          { name: '红楼梦', author: '曹雪芹', price: 50.00, category: '小说', stock: 15 },
          { name: '活着', author: '余华', price: 40.00, category: '小说', stock: 20 }
        ],
        currentPage: 1,
        pageSize: 10,
        totalBooks: 5
      };
    },
    computed: {
      // 根据搜索、分类和排序过滤书籍
      filteredBooks() {
        let books = this.tableData;
  
        // 搜索过滤
        if (this.searchQuery) {
          books = books.filter(book => book.name.includes(this.searchQuery) || book.author.includes(this.searchQuery));
        }
  
        // 分类过滤
        if (this.selectedCategory) {
          books = books.filter(book => book.category === this.selectedCategory);
        }
  
        // 排序
        if (this.sortBy === 'priceAsc') {
          books = books.sort((a, b) => a.price - b.price);
        } else if (this.sortBy === 'priceDesc') {
          books = books.sort((a, b) => b.price - a.price);
        }
  
        return books;
      }
    },
    methods: {
      fetchBooks() {
        // 模拟获取书籍数据
        this.totalBooks = this.tableData.length;
      },
      handleSearch() {
        console.log('搜索书籍：', this.searchQuery);
        this.fetchBooks();
      },
      handleStockIn(row) {
        row.stock += 1;
        this.$message.success('书籍入库成功');
      },
      handleStockOut(row) {
        if (row.stock > 0) {
          row.stock -= 1;
          this.$message.success('书籍出库成功');
        } else {
          this.$message.warning('库存不足，无法出库');
        }
      },
      handleDelete(row) {
        this.tableData = this.tableData.filter(book => book.name !== row.name);
        this.totalBooks = this.tableData.length;
        this.$message.success('书籍删除成功');
      },
      handleSizeChange(size) {
        this.pageSize = size;
      },
      handleCurrentChange(page) {
        this.currentPage = page;
      },
      handleRowClick(row) {
        this.$message.info('查看书籍详情：' + row.name);
      }
    },
    mounted() {
      this.fetchBooks();
    }
  };
  </script>
  
  <style scoped>
  .el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .header-left {
    font-weight: bold;
  }
  
  .header-right {
    display: flex;
    align-items: center;
  }
  
  .header-right a {
    margin-right: 20px;
    color: #333;
    text-decoration: none;
  }
  
  .warehouse-info-card, .inventory-card {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .warehouse-info {
    display: flex;
    align-items: center;
  }
  
  .warehouse-details {
    margin-left: 20px;
  }
  
  .el-table {
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .el-table__header th {
    background-color: #f5f7fa;
    color: #333;
    font-weight: bold;
  }
  
  .el-table__body tr:hover {
    background-color: #f0f9eb;
  }
  
  .el-pagination {
    margin-top: 20px;
  }
  </style>